<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>阴影</title>
        <style type="text/css">
            h5 {
                text-align: center;
            }
            .wrapper {
                width: 200px;
                height: 100px;
                border: 1px solid blue;
                margin: 50px auto;
            }

            .out-set {
                box-shadow: 0 0 10px 10px red;
            }

            .in-set {
                /* box-shadow: 水平偏移 垂直偏移 模糊距离 阴影尺寸 阴影颜色 [inset] */
                box-shadow: 0 0 10px 10px red inset;
            }

            .all-around {
                box-shadow:   0 -5px 5px 0 red,
                            5px    0 5px 0 green,
                              0  5px 5px 0 purple,
                            -5px   0 5px 0 blue;
            }
        </style>
    </head>
    <body>
        <h5>批量设置四周阴影(外部阴影)</h5>
        <div class="wrapper out-set"></div>
        <h5>批量设置四周阴影(内部阴影)</h5>
        <div class="wrapper in-set"></div>
        <h5>分别设置四周阴影(外部阴影)</h5>
        <div class="wrapper all-around"></div>

        <h5>试试圆角边框</h5>
        <div class="wrapper all-around" style="border-radius: 50%;"></div>
    </body>
</html>